<template>
    <div class="khead">
        <div class="khead-div1">
            <h5 class="khead-h5">知识库</h5>
            <i class="el-icon-back" @click="resback2"></i>
        </div>
        <h5 class="khead2-h5">热门知识</h5>
        <ul class="hot">
            <li v-for="(v, i) in hotid" :key="i" @click="watch(v)"><i class="el-icon-s-opportunity"></i> {{
                v.title
            }}</li>
        </ul>

        <!-- 详情弹出框 -->
        <el-dialog title="知识详情" :visible.sync="watchDialog" width="50%">
            <el-form :model="watchData" class="addDiv">
                <el-form-item label="知识标题" :label-width="formLabelWidth">
                    <el-input v-model="watchData.title" autocomplete="off" disabled></el-input>
                </el-form-item>
                <el-form-item label="内容" :label-width="formLabelWidth">
                    <el-input v-model="watchData.content" autocomplete="off" type="textarea" :rows="12" disabled></el-input>
                </el-form-item>

            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="watchDialog = false">取 消</el-button>
                <el-button type="primary" @click="watchDialog = false">确定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            watchDialog: false,
            formLabelWidth: '100px',
            watchData: {
                id: '',
                title: '标题',
                content: '内容内容内容内容内容内容内容内容内容内容内容内容'
            },
            hotid: [
                { name: '电脑蓝屏解决方案' },
                { name: 'CPU过高处理办法' },
                { name: '变现站线路常见问题与解决措施' },
                { name: '变压器故障与解决措施' },
                { name: 'Linux常见磁盘故障排查' },
                { name: '高压室系统电容补偿效果' }
            ]
        }
    },
    methods: {
        resback2() {
            this.$router.push('/home/index')
        },
        watch(v) {
            this.watchDialog = true
            // console.log(1, v)
            this.watchData.title = v.title
            this.watchData.content = v.content
        }
    },
    mounted() {
        this.$axios({
            url: '/Linux',
            method: 'get',
            params: {
                id_gte: 5,
                id_lte: 10
            }
        }).then(({ data }) => {
            if (data.length > 0) {
                // console.log(data)
                this.hotid = data
            }
        })
    }
}
</script>

<style lang="less" scoped>
.khead {
    width: 100%;
    height: 320px;
    background: #FFFFFF;
    box-shadow: 0px 3px 6px 0px #E1E1E1;

    .khead-div1 {
        width: 100%;
        height: 50px;
        border-bottom: 1px solid #E5E5E5;

        .khead-h5 {
            width: 64px;
            height: 22px;
            font-size: 20px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 700;
            color: #0970B8;
            line-height: 22px;
            float: left;
            margin-left: 40px;
            margin-top: 14px;
        }

        .el-icon-back {
            float: right;
            margin-right: 40px;
            margin-top: 15px;
            font-size: 20px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 600;
            color: #999999;
            cursor: pointer;
        }
    }

    .khead2-h5 {
        height: 22px;
        font-size: 20px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 600;
        color: #333333;
        line-height: 22px;
        margin-left: 40px;
        margin-top: 30px;
    }

    .hot {
        columns: 2;
        column-count: 3;
        margin-top: 30px;

        li {
            list-style: none;
            height: 60px;
            font-size: 18px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #909399;
            line-height: 60px;
            margin-left: 80px;
            cursor: pointer;

            .el-icon-s-opportunity {
                color: #fff;
                background: #DBA000;
                border-radius: 2px;
            }
        }
    }
}
</style>